<template>
  <h3 class="text-lg font-semibold mb-2 ml-2 flex items-top">
    <div class="grow">权限管理</div>
    <Button
      class="mr-2"
      type="primary"
      :loading="actionLoading"
      @click="handleUpdate"
      >保存</Button
    >
  </h3>
  <div class="flex">
    <Card size="small" class="w-[220px] mr-3 shrink-0">
      <template #title>
        <Tabs v-model:active-key="tab" size="small" class="h-[55px]">
          <Tabs.TabPane :key="0" tab="角色"></Tabs.TabPane>
          <Tabs.TabPane :key="1" tab="权限点"></Tabs.TabPane>
        </Tabs>
      </template>
      <div v-if="tab === 0" style="height: calc(100vh - 180px); overflow: auto">
        <div
          v-for="(i, idx) in params.content.roles"
          :key="i.name"
          class="p-2 mb-2 rounded-md hover:bg-blue-100 cursor-pointer flex"
          :class="{ 'bg-blue-100 text-blue-700': index === idx }"
          @click="index = idx"
        >
          <div class="grow">
            <div class="font-semibold">{{ i.name }}</div>
            <div class="text-sm text-secondary-200">
              <span class="mr-4">用户: {{ i.users.length }}</span>
              <span>权限点: {{ i.permissions.length }}</span>
            </div>
          </div>
          <div>
            <Button
              size="small"
              type="link"
              class="ml-1"
              @click.stop="() => handleEditRole(i, idx)"
            >
              <template #icon>
                <Edit :size="14" />
              </template>
            </Button>
            <Button
              size="small"
              type="link"
              class="ml-1"
              @click.stop="() => handleDeleteRole(idx)"
            >
              <template #icon>
                <X :size="16" />
              </template>
            </Button>
          </div>
        </div>
        <Button
          size="small"
          type="link"
          class="ml-1"
          @click.stop="handleAddRole"
        >
          <template #icon>
            <CirclePlus :size="16" />
          </template>
        </Button>
      </div>
      <div v-if="tab === 1" style="height: calc(100vh - 180px); overflow: auto">
        <div v-for="(i, idx) in params.content.permissions" :key="i">
          <div
            class="p-2 mb-2 rounded-md hover:bg-blue-100 cursor-pointer flex"
          >
            <div class="grow">{{ i }}</div>
            <Button
              size="small"
              type="link"
              @click.stop="() => handleDeletePerm(idx)"
            >
              <template #icon>
                <X :size="16" />
              </template>
            </Button>
          </div>
        </div>
        <Button size="small" type="link" @click="handleAddPerm">
          <template #icon>
            <CirclePlus :size="16" />
          </template>
        </Button>
      </div>
    </Card>
    <div class="grow">
      <Card size="small" class="mb-3" v-if="params.content.roles.length">
        <template #title>
          <div>
            角色：<Tag>{{ params.content.roles[index].name }}</Tag>
          </div>
        </template>
        <div class="font-semibold mb-2">用户</div>
        <Select
          v-model:value="params.content.roles[index].users"
          mode="multiple"
          showSearch
          class="w-full"
          :filterOption="false"
          :options="users"
          @search="fetchUsers"
        />
        <Divider class="my-6" />
        <div class="font-semibold mb-2">权限点</div>
        <Select
          v-model:value="params.content.roles[index].permissions"
          mode="multiple"
          showSearch
          class="w-full"
          :options="
            params.content.permissions.map((i) => ({ label: i, value: i }))
          "
        />
      </Card>
    </div>
    <ModalEditPerm.Instance />
    <ModalEditRole.Instance />
  </div>
</template>

<script setup lang="ts">
import {
  Button,
  Card,
  Divider,
  Modal,
  Select,
  Tabs,
  Tag,
} from 'ant-design-vue';
import { CirclePlus, Edit, X } from 'lucide-vue-next';
import { ref } from 'vue';

import { deserialize } from '@/plugins/reflect-metadata';

import useAuthItem from './hooks/useAuthItem';
import useUsers from './hooks/useUserList';
import { ModalEditPerm, ModalEditRole } from './modals';
import { AuthContentRole } from './models/AuthItem';

const { users, fetchUsers } = useUsers();

const {
  params, actionLoading, handleFetch, handleUpdate,
} = useAuthItem();

handleFetch('galaxy_lightcone');
const index = ref(0);
const tab = ref(0);

const handleAddRole = () => {
  ModalEditRole.show({
    title: '添加角色',
    reload: (value: string) => params.value.content.roles.push(
      deserialize(
        { name: value, users: [], permissions: [] },
        AuthContentRole,
      ),
    ),
  });
};
const handleEditRole = (role: AuthContentRole, idx: number) => {
  ModalEditRole.show({
    title: '编辑角色',
    role,
    reload: (value: string) => {
      params.value.content.roles[idx].name = value;
    },
  });
};
const handleDeleteRole = (idx: number) => Modal.confirm({
  title: '操作确认',
  content: '是否确认删除该角色？',
  onOk() {
    params.value.content.roles.splice(idx, 1);
  },
});
const handleAddPerm = () => {
  ModalEditPerm.show({
    title: '添加权限点',
    reload: (value: string) => params.value.content.permissions.push(value),
  });
};
const handleDeletePerm = (idx: number) => Modal.confirm({
  title: '操作确认',
  content: '是否确认删除该权限点？',
  onOk() {
    params.value.content.permissions.splice(idx, 1);
  },
});
</script>
